<template>
	<div>
		<div class="home-option">
			<div style="display: flex">
				<el-input
					v-model="condition.name"
					:placeholder="$t('home.index_placeholder')"
					style="width: 300px"
					@input="search"
				></el-input>
				<el-select
					v-model="condition.order"
					:placeholder="$t('home.order_placeholder')"
					style="margin-left: 5px"
					clearable
					@change="search"
				>
					<el-option :label="$t('home.order_name_asc')" value="NAME_ASC"></el-option>
					<el-option :label="$t('home.order_name_desc')" value="NAME_DESC"></el-option>
					<el-option :label="$t('home.order_size_asc')" value="SIZE_ASC"></el-option>
					<el-option :label="$t('home.order_size_desc')" value="SIZE_DESC"></el-option>
					<el-option :label="$t('home.order_doc_asc')" value="DOC_ASC"></el-option>
					<el-option :label="$t('home.order_doc_desc')" value="DOC_DESC"></el-option>
				</el-select>
				<el-button type="primary" style="margin-left: 5px" @click="search">{{ $t('home.search') }}</el-button>
			</div>
			<div style="margin-right: 15px;display: flex;">
				<el-dropdown split-button @click="init" @command="set_interval">
					{{ $t('home.refresh') }}
					<template #dropdown>
						<el-dropdown-menu>
							<el-dropdown-item :command="5000">{{ $t('home.refresh_5') }}</el-dropdown-item>
							<el-dropdown-item :command="30000">{{ $t('home.refresh_30') }}</el-dropdown-item>
							<el-dropdown-item :command="60000">{{ $t('home.refresh_60') }}</el-dropdown-item>
							<el-dropdown-item :command="-1">{{ $t('home.refresh_canel') }}</el-dropdown-item>
						</el-dropdown-menu>
					</template>
				</el-dropdown>
				<el-button type="primary" style="margin-left: 10px">{{ $t('home.new_index') }}</el-button>
			</div>
		</div>
		<div class="home-main" v-loading="index_loading">
			<index-view v-for="view, index in show_indices" :index="view" :key="index"></index-view>
		</div>
	</div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { ElMessage } from 'element-plus'

import { check_route } from "@/plugins/route";
import { useUrlStore } from '@/store/UrlStore';
import { useIndexStore } from '@/store/IndexStore';

import Index from "@/view/Index";

import IndexView from "./component/IndexView.vue";
import { mapState } from 'pinia';

export default defineComponent({
	components: {
		IndexView
	},
	data: () => {
		return {
			// 根据条件过滤后的索引
			show_indices: [] as Array<Index>,
			// 搜索条件
			condition: {
				name: "",
				order: "NAME_ASC",
			},
			// 定时器
			interval: {} as NodeJS.Timer | null,
			// 列表加载中
			index_loading: false
		};
	},
	computed: {
		...mapState(useUrlStore, ['url']),
		...mapState(useIndexStore, ['indices'])
	},
	watch: {
		indices() {
			this.search()
		}
	},
	methods: {
		// 初始化状态
		init() {
			useIndexStore().reset();
		},
		set_interval(millisecond: number) {
			if (millisecond === -1) {
				this.clear_interval();
				return;
			}
			ElMessage({
				message: `开始每隔${millisecond / 1000}秒刷新一次`,
				type: "success",
			});
			this.init();
			this.interval = setInterval(() => {
				console.log(check_route("home"))
				if (check_route("home")) {
					this.init();
				} else {
					this.clear_interval();
				}
			}, millisecond);
		},
		clear_interval() {
			ElMessage({
				message: "取消刷新",
				type: "success",
			});
			clearInterval(Number(this.interval));
			this.interval = null;
		},
		/**
		 * 基于当前索引数组进行过滤
		 */
		search() {
			this.index_loading = true;
			this.show_indices = this.indices.filter((item) => {
				return item.name.indexOf(this.condition.name) > -1;
			});
			// 排序
			switch (this.condition.order) {
				case "NAME_ASC":
					this.show_indices = this.show_indices.sort((a, b) => {
						return a.name.localeCompare(b.name, "zh-CN");
					});
					break;
				case "NAME_DESC":
					this.show_indices = this.show_indices.sort((a, b) => {
						return b.name.localeCompare(a.name, "zh-CN");
					});
					break;
				case "SIZE_ASC":
					this.show_indices = this.show_indices.sort((a, b) => {
						return a.original_size - b.original_size;
					});
					break;
				case "SIZE_DESC":
					this.show_indices = this.show_indices.sort((a, b) => {
						return b.original_size - a.original_size;
					});
					break;
				case "DOC_ASC":
					this.show_indices = this.show_indices.sort((a, b) => {
						return a.doc_count - b.doc_count;
					});
					break;
				case "DOC_DESC":
					this.show_indices = this.show_indices.sort((a, b) => {
						return b.doc_count - a.doc_count;
					});
					break;
			}
			this.$nextTick(() => {
				this.index_loading = false;
			})
		},
	},
});
</script>

<style lang="less">
.home-option {
	position: absolute;
	top: 15px;
	left: 10px;
	right: 10px;
	height: 40px;
	display: flex;
	justify-content: space-between;
}

.home-main {
	position: absolute;
	top: 60px;
	left: 5px;
	right: 5px;
	bottom: 5px;
	overflow: auto;
}
</style>